<template>
  <h1>1.组件的基本写法</h1>
  fullName:{{ fullName }}
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { ref, computed } from "vue";
let firstName = ref("李");
let lastName = ref("四");
/* 
  设置一个只读的计算属性,使用computed方法 接受一个回调函数作为参数
  computed方法返回一个ref对象,模板中直接使用,setup中要加value

*/
let fullName = computed(() => {
  console.log(1);
  return firstName.value + lastName.value;
});

console.log(fullName);
</script>

<style scoped></style>
